<template>
  <view class="container bottom-safe-area">
    <!-- TabBar主体 -->
    <view
      class="tab-bar bottom-safe-area"
    >
      <view
        v-for="item in filteredTabs"
        :key="item.pagePath"
        class="tab-item"
        @click="switchTab(item)"
      >
        <view class="icon">
          <image
            :src="currentPage === item.pagePath ? item.selectedIconPath : item.iconPath"
          />
          <view class="number" v-if="item.permission === 'ly_tab_message' && tabbarBadge > 0">{{ tabbarBadge >= 100 ? '99+' : tabbarBadge }}</view>
        </view>
        <view :class="{ 'text-active': currentPage === item.pagePath }">
          {{ item.text }}
        </view>
      </view>
    </view>

    <!-- 安全区域占位 -->
    <view :style="{ height: safeAreaHeight + 'px' }"></view>
  </view>
</template>

<script>
import store from '@/store'

export default {
  data() {
    return {
      safeAreaHeight: 54, // 安全区高度
      currentPage: '',
      tabs: [
        {
          text: '首页',
          pagePath: 'pages/home/index',
          iconPath: '/static/tabbar/home.png',
          selectedIconPath: '/static/tabbar/home-selected.png',
          permission: 'ly_tab_home'
        },
        {
          text: '订单',
          pagePath: 'pages/order/index',
          iconPath: '/static/tabbar/order.png',
          selectedIconPath: '/static/tabbar/order-selected.png',
          permission: 'ly_tab_order'
        },
        {
          text: '消息',
          pagePath: 'pages/message/index',
          iconPath: '/static/tabbar/message.png',
          selectedIconPath: '/static/tabbar/message-selected.png',
          permission: 'ly_tab_message'
        },
        {
          text: '应用',
          pagePath: 'pages/apply/index',
          iconPath: '/static/tabbar/apply.png',
          selectedIconPath: '/static/tabbar/apply-selected.png',
          permission: 'ly_tab_apply'
        },
        {
          text: '我的',
          pagePath: 'pages/user/index',
          iconPath: '/static/tabbar/user.png',
          selectedIconPath: '/static/tabbar/user-selected.png',
          permission: 'ly_tab_user'
        }
      ]
    }
  },
  computed: {
    // 过滤有权限的菜单
    filteredTabs() {
      return this.tabs.filter(item => this.$checkModule(item.permission) || item.permission === 'ly_tab_user')
    },
    tabbarBadge() {
      return store.getters?.tabbarBadge || 0
    }
  },
  mounted() {
    const currentPage = getCurrentPages();
    this.currentPage = currentPage[currentPage.length - 1]?.route || ''
  },
  methods: {
    // 切换菜单
    switchTab(item) {
      if (this.selected === item.pagePath) return
      this.$navTo(item.pagePath)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
    font-size: 24rpx;

    .icon {
      position: relative;
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
      display: inline-block;

      image {
        width: 100%;
        height: 100%;
      }

      .number {
        position: absolute;
        top: -8rpx;
        right: -16rpx;
        width: 34rpx;
        height: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: #F92A12;
        border-radius: 50%;
        z-index: 99;
        font-size: 20rpx;
      }
    }

    .text-active {
      color: #4582FE;
    }
  }
}
</style>
